<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    h4{
        color: red;
        background-color: yellow;
    }
    #title{
        color: yellow;
        border: 1px solid blue;
    }

    .error{
        background-color: red;
    }
    .success{
        background-color: green;
    }
    .msg{
        color: white;
    }
    #title:hover{
        background-color: black;
    }
    #title,h4,error{
        text-decoration: underline;
    }
    *{
        font-style: italic;
    }
    input[type="text"]{
        background-color: yellow;
    }
    a:link{
        color: gray;
    }
    a:visited{
        color: green;
    }
    a:hover{
        color: orange;
    }
    a:active{
        color: red
    }
    div span{
        color: cyan;
    }
    #d1>div>span{
        color: red;
    }
</style>
<body>
    <div id="d1">
        <span>1</span>
        <div>
            <span>2</span>
            <p>测试文字</p>
            <p>我是<span>测试</span>段落</p>
        </div>
        <span>3</span>
    </div>
    <h4>我是标题</h4>
    <p>我是段落</p>
    <a href="#">我是超链接</a>
    <h4 id="title">我是标题2</h4>
    <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div4</div>
    <br>
    <span class="error msg">用户名已被占用</span>
    <span class="error msg">密码长度不够</span>
    <span class="error msg">手机号格式不正确</span>
    <br><br>
    <span class="success msg">用户名可以使用</span>
    <span class="success msg">密码为合法密码</span>
    <span class="success msg">手机号格式正确</span>
    <hr>
    <input type="text">
    <input type="password">
    <br>
    <a href="https://www.baidu.com">百度</a>
    <a href="abc">abc</a>
</body>
</html>